<template>
  <div class="main">
    <div class="content">
      <div class="bg"></div>
      <div class="wrapper">
        <img src="@/assets/images/download/phone.png" class="phone-sty" alt="">
        <div class="right">
          <div class="title">{{ $t('home.slogan') }}</div>
          <div class="sub-title">{{ $t('home.down_sub_tit') }}</div>
          <div class="code-sty">
            <img src="@/assets/images/download/img1.png" class="img-sty" alt="">
            <img src="@/assets/images/download/img2.png" class="img-sty" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {

    }
  },
}
</script>

<style lang="less" scoped>
.main {
  .content {
    min-height: 908px;
    background: #FFFFFF;
    position: relative;

    .bg {
      height: 500px;
      background: linear-gradient(359deg, #FFFFFF 0%, #EFF1F9 100%);
    }

    .wrapper {
      padding-top: 90px;
      padding-left: 240px;
      padding-right: 120px;
      display: flex;
      gap: 46px;
      position: absolute;
      top: 0px;


      .phone-sty {
        width: 561px;
      }

      .right {
        margin-top: 40px;

        .title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 60px;
          color: #1E1714;
          line-height: 82px;
        }

        .sub-title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28px;
          color: #1E1714;
          line-height: 33px;
          margin-top: 12px;
        }

        .code-sty {
          display: flex;
          align-items: center;
          gap: 50px;
          margin-top: 24px;

          .img-sty {
            width: 202px;
            height: 242px;
          }
        }
      }
    }
  }
}
</style>